<template>
<view>
<!--pages/tools/jifenruhu/index/index.wxml-->
<image src="http://imgbdb3.bendibao.com/xcx/20206/30/2020630135643_19994.png" class="main-img"></image>
<view class="main-content">
<form catchsubmit="formSubmit">
  <view class="house">
    <view class="main-title">一、稳定居住</view>
    <view class="input-box">
      <text>1.拥有深圳市合法产权住房时间</text>
      <input name="propertyHouse" type="number">
      <text>月</text>
    </view>
    <view class="input-box">
      <text>2.在深圳市租赁住房时间</text>
      <input name="rentalHouse" type="number">
      <text>月</text>
    </view>
    <view class="cue-text">* 以上两个选项二选一，各项积分指标计算时点均截止至2020年9月30日。</view>
  </view>
  <view class="job top">
    <view class="main-title">二、稳定就业</view>
    <view class="input-box">
      <text>缴纳深圳养老保险时间</text>
      <input name="endowment" type="number">
      <text>月</text>
    </view>
    <view class="cue-text">* 申请人缴交深圳市社会养老保险有中断的，其分值将在剔除中断时间后再予累计计算，补缴的不算。</view>
  </view>
  <view class="honesty top">
    <view class="main-title">二、诚信守法</view>
    <view class="radio-item">
      <text>1.是否存在申请时有不良信用记录且还款逾期时长未满90天</text>
      <radio-group @change="radioChange" data-flag="1" name="credit">
        <view class="radio-group">
          <radio color="#5395de" value="15">是</radio>
          <radio color="#5395de" checked="true" value="0">否</radio>
        </view>
      </radio-group>
      <view class="input-box" v-if="show1">
        <text>不良信用记录</text>
        <input name="creditInput" type="number">
        <text>笔</text>
      </view>
    </view>
    <view class="radio-item">
      <text>2.申请时有不良信用记录且还款逾期时长满90天</text>
      <radio-group @change="radioChange" data-flag="2" name="creditfull">
        <view class="radio-group">
          <radio color="#5395de" value="30">是</radio>
          <radio color="#5395de" checked="true" value="0">否</radio>
        </view>
      </radio-group>
      <view class="input-box" v-if="show2">
        <text>不良信用记录</text>
        <input name="creditfullInput" type="number">
        <text>笔</text>
      </view>
    </view>
    <view class="radio-item">
      <text>3.申请时是否被法院列为失信被执行人</text>
      <radio-group @change="radioChange" name="dishonesty">
        <view class="radio-group">
          <radio color="#5395de" value="100">是</radio>
          <radio color="#5395de" checked="true" value="0">否</radio>
        </view>
      </radio-group>
    </view>
    <view class="radio-item">
      <text>4.是否有刑事犯罪记录</text>
      <radio-group @change="radioChange" name="crime">
        <view class="radio-group">
          <radio color="#5395de" value="200">是</radio>
          <radio color="#5395de" checked="true" value="0">否</radio>
        </view>
      </radio-group>
    </view>
    <view class="radio-item">
      <text>5.是否有被强制戒毒或因吸毒被执行行政强制措施、行政处罚记录</text>
      <radio-group @change="radioChange" name="punish">
        <view class="radio-group">
          <radio color="#5395de" value="150">是</radio>
          <radio color="#5395de" checked="true" value="0">否</radio>
        </view>
      </radio-group>
    </view>
  </view>
  <view class="nav">
    <navigator class="btn" url="/pages/webview/webview?path=https://mp.weixin.qq.com/s/atBSYiOdeCj22q2yiFH4YQ">申请指南</navigator>
    <navigator class="btn" url="/pages/article/detail/detail?id=3448&city=sz&type=bsy">积分规则</navigator>
  </view>
  <button class="result" form-type="submit">计算结果</button>
</form>

<view class="result-box" v-if="showResult">
  <view class="flex">
    <view class="res-title">计算结果</view>
    <view class="res-text" style="margin-top:40rpx;">入户积分:{{result}}</view>
    <view class="res-text" style="margin-top:40rpx;">温馨提示：此结果仅供参考。保存下方二维码，关注深圳本地宝并回复【积分】即可获取申请入口</view>
    <view class="qrcode" @tap="previewBtn"><image src="/static/images/szbdb.png"></image></view>
    
    <view class="certain" @tap="certainBtn">确定</view>
  </view>
  
</view>
</view>
</view>
</template>

<script>

export default {
  data() {
    return {
      show1: false,
      show2: false,
      showResult: false,
      result: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "深圳纯积分入户分值估算",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: "深圳纯积分入户分值估算",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    formSubmit(e) {
      let resData = e.detail.value;

      if (resData.propertyHouse != '' && resData.rentalHouse == '') {
        let result = Number(resData.propertyHouse) + Number(resData.endowment) * 1.5 - Number(resData.credit) * Number(resData.creditInput ? resData.creditInput : 0) - Number(resData.creditfull) * Number(resData.creditfullInput ? resData.creditfullInput : 0) - Number(resData.dishonesty) - Number(resData.crime) - Number(resData.punish);
        this.setData({
          result: result.toFixed(1),
          showResult: true
        });
      } else if (resData.propertyHouse == '' && resData.rentalHouse != '') {
        let result = Number(resData.rentalHouse) * 0.2 + Number(resData.endowment) * 1.5 - Number(resData.credit) * Number(resData.creditInput ? resData.creditInput : 0) - Number(resData.creditfull) * Number(resData.creditfullInput ? resData.creditfullInput : 0) - Number(resData.dishonesty) - Number(resData.crime) - Number(resData.punish);
        this.setData({
          result: result.toFixed(1),
          showResult: true
        });
      } else if (resData.propertyHouse != '' && resData.rentalHouse != '') {
        uni.showModal({
          title: '温馨提示',
          content: '稳定居住选项只能二选一哦~',
          showCancel: false,
          confirmText: "重新填写"
        });
      }
    },

    radioChange(e) {
      let flag = e.currentTarget.dataset.flag;
      let value = e.detail.value;

      if (flag == 1) {
        if (value == "15") {
          this.setData({
            show1: true
          });
        } else {
          this.setData({
            show1: false
          });
        }
      } else {
        if (value == "30") {
          this.setData({
            show2: true
          });
        } else {
          this.setData({
            show2: false
          });
        }
      }
    },

    previewBtn() {
      uni.previewImage({
        current: "/static/images/szbdb.png",
        // 当前显示图片的http链接
        urls: ["/static/images/szbdb.png"] // 需要预览的图片http链接列表

      });
    },

    certainBtn() {
      this.setData({
        showResult: false
      });
    }

  }
};
</script>
<style>
/* pages/tools/jifenruhu/index/index.wxss */
.main-img{width: 100%;height: 276rpx;}
.main-content{margin:30rpx 40rpx;}
.main-title{font-size: 34rpx;font-weight: 600;}
.input-box{display: flex;align-items: center;margin: 20rpx 0;}
.input-box text{font-size: 30rpx;font-weight: 500;}
.input-box input{width: 100rpx;border: 1rpx solid rgb(73, 71, 71);margin: 0 10rpx; padding-left: 5rpx;}
.cue-text{color: #333333;font-size: 24rpx;}
.top{margin-top:30rpx;}
.radio-item{margin: 20rpx 0;}
.radio-item text{font-size: 30rpx;font-weight: 500;}
.radio-group{display: flex;align-items: center;margin-top: 20rpx;}
.radio-group radio{margin-right: 40rpx;}
.nav{display: flex;align-items: center;justify-content: center;margin-top: 50rpx;}
.btn{border: 4rpx solid #3886d8;border-radius: 40rpx;padding: 20rpx 80rpx;text-align: center;
font-size: 30rpx;color:#3886d8;margin-right: 30rpx;}
.result{background-color:#3886d8;border-radius: 40rpx; text-align: center;
font-size: 30rpx;color:#fff;padding: 20rpx 0;margin:40rpx 0;}

.result-box{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);position: fixed;top: 0;/*  #ifdef  H5  */top: calc(88rpx + constant(safe-area-inset-top));top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */left: 0;right: 0;bottom: 0;z-index: 10;display: flex;align-items: center;justify-content: center;} 
.flex{display: flex;flex-direction: column;background-color: #fff;width: 80%;
height: 70%;border-radius: 20rpx;position: relative;}
/* .content{background-color: #fff;width: 80%;} */
.res-title{font-size: 34rpx;text-align: center;font-weight: 500;margin-top:120rpx;}
.res-text{font-size: 30rpx;text-align: center;color: rgba(0, 0, 0, 0.5);
margin-left: 50rpx;margin-right: 50rpx; }
.certain{border-top:1rpx solid #bebaba;padding: 30rpx 0;text-align: center;font-size: 30rpx;
color:#576b95;position: absolute;bottom: 0;width: 100%;}
.qrcode{text-align: center;margin-top: 50rpx;}
.qrcode image{width: 400rpx;height: 400rpx;}
</style>